<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-icons/maps-icons.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-item/paper-icon-item.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-item/paper-item-body.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">

<link rel="import" href="../../bower_components/google-apis/google-maps-api.html">

<dom-module id="forest-search-panel">
  <template>
    <style include="iron-flex">
      paper-material {
        display: block;
        padding: 16px;
        border-radius: 0 2px 2px 0;
        min-height: 160px;
      }

      :host {
        display: none;
        width: 250px;
      }

      .results-list {
        overflow-y: hidden;
      }
    </style>
    <google-maps-api id="api" on-api-load="initPlacesApi_"></google-maps-api>

    <paper-material elevation="1" class="layout vertical" stretch>
      <div class="header layout horizontal center">
        <paper-icon-button id="close" icon="chevron-left" on-tap="close"></paper-icon-button>
        <div>Search</div>
      </div>

      <div class="content">
        <paper-input
            tabindex="0"
            type="search"
            always-float-label="true"
            label="Zoom to a location on the map"
            on-value-changed="handleQuery_"
            on-keydown="handleInputKeyDown_"
            use-v2-underline>
        </paper-input>

        <div class="results-list" selectable="none">
          <template is="dom-repeat" items="{{results}}">
            <paper-item on-tap="handleResultTapped_" on-keydown="handleItemKeyDown_">
              {{item.name}}
            </paper-item>
          </template>
        </div>
      </div>

    </paper-material>
  </template>
  <script src="forest-search-panel.js"></script>
</dom-module>
